<template>
  <view class="al-c">
    <u-search
      v-model="val"
      :showAction="false"
      :placeholder="hint || '搜索'"
      :bgColor="isDark ? '#333' : '#f2f2f2'"
      :color="isDark ? '#ccc' : '#222'"
      @search="onInput"
      @clear="onInput"
      @focus="focus = true"
      @blur="focus = false"
    ></u-search>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    value: String,
    hint: String,
  },
  computed: {
    ...mapState(["isDark"]),
  },
  data() {
    return {
      val: this.value,
      focus: false,
    };
  },
  watch: {
    value(val) {
      this.val = val;
    },
    focus(val) {
      this.$emit("focus", val);
      if (!val && this.value != this.val) {
        this.onInput(this.val);
      }
    },
  },
  methods: {
    onInput(val = "") {
      this.$emit("input", val.trim());
    },
  },
};
</script>
